<!-- 班级管理 -->
<script setup>
import { Search, ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useClasStore } from '@/stores/index'
const classStore = useClasStore()

// 搜索框
const classInfo = ref('')
</script>
<template>
  <el-card class="my-class-info">
    <div class="header">
      <el-input v-model="classInfo" :suffix-icon="Search" class="input-header" placeholder="搜索" />
    </div>

    <!-- 主体 -->
    <div class="container">
      <p class="title">班级列表</p>
      <ul class="class-list" v-for="item in classStore.classList" :key="item.classId">
        <li class="class-item">
          <div class="left">
            <div>{{ item.classId }} <erWeiMa /></div>
            <div style="color: gray; font-size: 13px; margin-top: 10px">
              学生人数 :{{ item.sum }}
            </div>
          </div>
          <div class="right">
            <el-button @click="classStore.stuManage(item.classId)">管理</el-button>
            <el-button type="primary" @click="classStore.deleteData(item.classId)">删除</el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>排序</el-dropdown-item>
                  <el-dropdown-item>重命名</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>
<style lang="scss">
.my-class-info {
  height: 100vh;
  margin: 0px 20px 20px 20px;
  background: white;

  .header {
    width: 15.625rem;
    display: flex;
    float: right;
    padding: 0 20px;
    background: #fff;

    .el-input__wrapper {
      border-radius: 50px;
    }
  }

  //   主体
  .container {
    display: flex;
    height: 100%;
    width: 100%;
    margin-left: 20px;
    flex-direction: column;

    .title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    // 班级列表ul
    .class-list {
      list-style: none;
      margin-right: 20px;
      height: 65px;
      border-bottom: 1px solid #ccc;

      .class-item {
        display: flex;
        justify-content: space-between;

        .left {
          padding: 0;
          position: relative;
          left: -40px;
        }

        // 按钮和下拉框
        .right {
          position: relative;
          top: 10px;
          .el-button {
            border-radius: 50px;
          }
          .el-dropdown {
            margin-left: 10px;
            top: 8px;
          }
          .el-icon--right {
            position: relative;
            top: 1px;
          }
        }
      }
    }
  }
}
</style>
